import { Layout, Button, Space, Flex, Radio, Input,Row,Col } from 'antd';
import { getTwoToneColor, LeftOutlined, RightOutlined, setTwoToneColor, CheckCircleTwoTone } from "@ant-design/icons";
import React, { useState, useEffect } from 'react';
import {useNavigate, useParams} from 'react-router-dom';
import { getOrderAmount, payOrder } from '../../services/order'; // Update the path accordingly

const CustomRadio = ({ value, checkedValue, onChange }) => (
    <div style={{ display: 'inline-block', marginRight: 10, cursor: 'pointer'}} onClick={() => onChange(value)}>
        {checkedValue === value ? <CheckCircleTwoTone twoToneColor="#FE4E84" style={{fontSize:"30px"}}/> : <div style={{ border: '1px solid #ccc', borderRadius: '50%', width: 20, height: 20 }} />}
    </div>
);

export default function OrderPaymentPage() {
    const { id } = useParams();
    /*
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const id = urlParams.get('id');
    console.log(id); // 输出传递过来的id
      */

    const navigate = useNavigate();
    const [orderId, setOrderId] = useState('');
    const [cost, setCost] = useState(0);
    const [paymentMethod, setPaymentMethod] = useState("Ali Pay");
    const [submitTime,setSubmitTime] = useState('');


    // 在 useEffect 中调用 fetchOrderInfo 函数
    useEffect(() => {
        fetchOrderInfo(id);
    }, []); // 在组件挂载时获取订单信息

    const fetchOrderInfo = async (orderId) => {
        try {
            const orderList = JSON.parse(localStorage.getItem('orderList'));
            const foundOrder = orderList.find(order => order.orderId === parseInt(orderId));
            if (foundOrder) {
                // console.log('payment:', orderId);
                const orderCost = foundOrder.cost + foundOrder.shipping - foundOrder.discount;
                console.log('payment:::::::',orderCost);
                setCost(orderCost)
                // 这里你可以将 orderCost 进行后续处理，比如设置到 state 中
            } else {
                console.log('Order not found with id:', orderId);
            }
        } catch (error) {
            console.error('Error fetching order info:', error);
        }
    };


    const handleConfirmPayment = async () => {
        try {
            const status = "已支付";
            const localOrderList = localStorage.getItem('orderList');
            console.log(localOrderList)
            // console.log(orderId,payment)
            await payOrder(orderId, { paymentMethod },{status});
            navigate('/order/pay/first/'+id);
        } catch (error) {
            console.error('Error confirming payment:', error);
        }
    };

    const handleBack = () => {
        navigate('/shoppingCar');
    };

    const onChange = (value) => {
        console.log('radio checked', value);
        setPaymentMethod(value);
    };


    return (
        <div style={{  margin: 'auto', backgroundColor: '#fff' }}>
        <div className="pay-container">
            <div className="header-container" style={{ marginTop: 10, textAlign: "center", display: "flex", alignItems: "center" }}>
                <LeftOutlined onClick={handleBack} />
                <h2 style={{ textAlign: "center", margin: "0 auto" }}>支付</h2>
            </div>

            <div style={{ marginTop: 50, textAlign: 'center' }}>
                <h4 style={{color:"grey"}}>支付金额</h4>
                <h1>￥{cost}</h1>
            </div>

            <div style={{ marginTop: 50 ,marginLeft:20 }}>
                <h3>支付方式</h3>
                <div style={{ display: 'flex',marginLeft:10}}>
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <img src={require('../../assets/img/alipay.png')} alt="支付宝" width="40" height="40" style={{ marginRight: 10 }} />
                                    <Col span={25}>
                                        <h3>支付宝支付</h3>
                                        <p style={{color:"gray"}}>推荐使用支付宝支付</p>
                                    </Col>
                                </div>
                                <CustomRadio value="Ali Pay" checkedValue={paymentMethod} onChange={onChange} />
                            </div>
                        </Col>
                        <Col span={24}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <img src={require('../../assets/img/wechatpay.png')} alt="微信支付" width="40" height="40" style={{ marginRight: 10 }} />
                                    <Col span={25}>
                                        <h3>微信支付</h3>
                                    </Col>
                                </div>
                                <CustomRadio value="Wechat Pay" checkedValue={paymentMethod} onChange={onChange} />
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>

            <Button type="primary" style={{ marginTop: 25, width: '100%', backgroundColor: '#FE4E84' ,borderRadius:10,height:40,fontSize:20}} onClick={handleConfirmPayment}>
                确认支付
            </Button>
        </div>
        </div>
    );
}